import React, { Component } from 'react';
import { Carousel } from 'antd';
import './banner.scss'
import { index_banner } from '../utils/api.js'
// const MyBanner = () => <div className="banner"></div>
class MyBanner extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
    }
    componentDidMount() {
        index_banner().then((res) => {
            this.setState({
                list: res.data.list
            })
        })
    }

    render() {
        return (
            <div className='banner'>
                {/* 通过Ant的ui框架进行轮播图的实现 */}
                <Carousel autoplay>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div key={index}><img src={item.pic} alt="" /></div>
                            )
                        })

                    }
                </Carousel>
            </div>
        );
    }
}

export default MyBanner;